<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>!window.jQuery && document.write("<script src=\"js\jquery-1.11.2.js\">"+"<\/script>")</script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.bannerImg img{
				float: left;
				width: 1440px;
				height: 520px;
			}
			.bannerImg{
				width: 5760px;
				height: 520px;
				position: absolute;
			}
			.bannerWarp{
				width: 1440px;
				height: 520px;
				overflow: hidden;
				position: relative;
			}
			#banner{
				width: 100%;
				height: 520px;
			}
			.btn{
				width: 40px;
				height: 65px;
				position: absolute;
				background: #000;
				cursor: pointer;
			}
			#last{
				left: 240px;
				top: 230px;
			}
			#next{
				left: 1200px;
				top: 230px;
				
			}
			.bannerNav{
				height: 30px;
				position: absolute;
				left: 673px;
				bottom: 50px;
				background: #ccc;
				border-radius: 50px;
				padding: 0 10px;
			}
			span{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: #fff;
				display: inline-block;
				margin: 0 10px;
				cursor: pointer;
			}
			.active{
				background: #f00;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<div class="bannerWarp">
				<div class="bannerImg">
					<img src="img/banner1.jpg"/>
					<img src="img/banner2.jpg"/>
					<img src="img/banner3.jpg"/>
					<img src="img/banner1.jpg"/>
				</div>
				<div class="bannerNav">
					<span class="active"></span>
					<span></span>
					<span></span>
				</div>
				<div id="last" class="btn">
					<img src="img/prev-btn.png"/>
				</div>
				<div id="next" class="btn">
					<img src="img/next-btn.png"/>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var index = 0;
			var timer = null;//定时器
			
			
			var parbannernav = document.getElementsByClassName("bannerNav")[0];//导航节点的父节点，为了方便找到小导航的dom节点,如果可以直接获取所有小导航，可不写这行代码
			var bannerNav = parbannernav.getElementsByTagName("span");//获取轮播图小导航的dom几点			
			var imgNumber = bannerNav.length;//现在是3张图片  获取轮播图小导航的数量，相当于用户可见的轮播图片数量，并不是实际的图片数量，例如：现在用户可见3张图轮播，可是为了无缝轮播，需要4张图片
			
			
			
			var imgWidth = $("img").innerWidth();//获取轮播图图片的宽度
			var imgVelocity = 1000;//轮播速度
						
			var banner = $("#banner");//获取鼠标移上及移开的事件对象
			var bannerImg = $(".bannerImg");//获取包裹图片的大盒子节点
			var bannerLast = $("#last");//获取上一张图片按钮
			var bannerNext = $("#next");//获取下一张图片按钮
			/*------------------小导航跟随图片轮播的函数--------------*/
			function lbtNav(){
					for (var i=0;i<bannerNav.length;i++) {
						bannerNav[i].className = "";
					}
					var navindex = index;
					if (navindex >= imgNumber) {
						navindex = 0;
					}
					bannerNav[navindex].className = "active";			
			}
				/*----------------无缝轮播基本----------------*/
			function lbt(){
				timer = setInterval(function(){
					index++;
					if (index==imgNumber+1) {
						$(bannerImg).css({"left":"0"})					
						index = 1;
					}
					$(bannerImg).animate({"left":-imgWidth*index});
					lbtNav();/*-调用了小导航跟随图片轮播的函数-*/
				},imgVelocity);				
			}
			lbt();/*-调用轮播图基本函数-*/
			/*------------------鼠标移上显示btn，并且停止轮播-----------*/
			$(banner).mouseover(function(){
				clearInterval(timer);
				$(bannerLast).animate({"opacity":"0.8"})
				$(bannerNext).animate({"opacity":"0.8"})
			})
			/*----------------鼠标移出隐藏btn，并且开始轮播-----------*/
			$(banner).mouseleave(function(){
				$(bannerLast).animate({"opacity":"0"})
				$(bannerNext).animate({"opacity":"0"})
				lbt();
			})
			/*--------------下一张图按钮--------------------*/
			$(bannerNext).click(function(){
				index++;
				if (index==imgNumber+1) {
					$(bannerImg).css({"left":"0"})					
					index = 1;
				}
				$(bannerImg).stop().animate({"left":-imgWidth*index});
				lbtNav();
			})
			/*---------------上一张图按钮----------------*/
			$(bannerLast).click(function(){
				index--;
				if (index==-1) {
					$(bannerImg).css({"left":-imgWidth*imgNumber})					
					index = imgNumber-1;
				}
				$(bannerImg).stop().animate({"left":-imgWidth*index});
				lbtNav();
			})
			/*----------------小导航的点击事件----------*/
			for (var i=0;i<bannerNav.length;i++) {
				bannerNav[i].index = i;
				bannerNav[i].onclick = function(){
					for (var j=0;j<bannerNav.length;j++) {
						if (this == bannerNav[j]) {
							index = this.index;
							$(bannerImg).stop().animate({"left":-imgWidth*index});
							bannerNav[j].className = "active";
						}else{
							bannerNav[j].className = "";						
						}						
					}
				}
			}			
		</script>
	</body>
</html>
